<template>
  <div class="box">
    <router-view></router-view>
    <header class="header">
       <van-nav-bar title="确认订单" left-arrow @click-left="$router.back()">
      </van-nav-bar>
    </header>
    <div class="content">
      <div v-if="flag" >
        <van-cell :title="name + ' ' + tel" :label="showAddress" @click="$router.push({path: 'addressList', query: { time: orderTime } })"/>
      </div>
      <div v-else>
        <van-cell class="add">
          <van-button type="danger" class="addinfo" round @click="$router.push({path: 'addressList', query: { time: orderTime } })">
            <van-icon name="plus" />
            请添加收获人信息</van-button>
       </van-cell>
      </div>
      <van-card
        v-for="item of orderList"
        :key="item.proid"
        :num="item.num"
        :price="item.originprice"
        :title="item.proname"
        :thumb="item.img1"
      />
      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
    <van-button type="danger" class="settle" round @click="toPlay">去结算</van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Cell, Card, CouponCell, CouponList, Popup, Button, Icon, Toast, Dialog } from 'vant'
import { confirmOrder, getDefaultAddress, deleteCartItem } from '@/api/order'

Vue.use(NavBar)
Vue.use(Cell)
Vue.use(Card)
Vue.use(CouponCell)
Vue.use(CouponList)
Vue.use(Popup)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Toast)
Vue.use(Dialog)
export default {
  data () {
    return {
      flag: false,
      addressList: [],
      chosenCoupon: -1,
      userMssge: '',
      address: '',
      coupons: [],
      disabledCoupons: [],
      coupon: {
        available: 1,
        condition: '无使用门槛\n最多优惠12元',
        reason: '',
        value: 150,
        name: '优惠券名称',
        startAt: 1489104000,
        endAt: 1514592000,
        valueDesc: '1.5',
        unitDesc: '元'
      },
      showList: false,
      orderList: [],
      orderTime: '',
      name: '',
      tel: '',
      province: '',
      city: '',
      county: '',
      addressDetail: ''
    }
  },
  computed: {
    showAddress () {
      let str = ''
      this.province === this.city
        ? str = this.province + this.county + this.addressDetail
        : str = this.province + this.city + this.county + this.addressDetail
      return str
    }
  },
  mounted () {
    this.orderTime = this.$route.query.time
    this.getOrder()
    this.getDefaultAddress()
    this.coupons.push(this.coupon)
  },
  methods: {
    async getOrder () {
      var res = await confirmOrder({
        userid: localStorage.getItem('userid'),
        time: this.orderTime
      })
      if (res.data.code === '200') {
        this.orderList = res.data.data
        if (res.data.flag === true) {
          this.name = res.data.address.name
          this.tel = res.data.address.tel
          this.province = res.data.address.province
          this.city = res.data.address.city
          this.county = res.data.address.county
          this.addressDetail = res.data.address.addressDetail
          this.flag = true
        }
      }
    },
    async getDefaultAddress () {
      var res = await getDefaultAddress({
        userid: localStorage.getItem('userid')
      })
      if (res.data.code === '200') {
        this.addressList = res.data.data
      }
    },
    // 没有实际的支付业务，仅实现删除将要支付的商品对应在购物车的数据
    async toPlay () {
      Dialog.confirm({
        message: '确定去结算吗 ？',
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      })
        .then(async () => {
          var res = await deleteCartItem({
            userid: localStorage.getItem('userid')
          })
          if (res.data.code) {
            this.$router.push({ name: 'cartIndex' })
            Toast('支付成功')
          }
        })
        .catch(() => {})
    },
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      this.coupons.push(this.coupon)
    }
  }
}
</script>

<style lang="stylus" scoped>
.settle
  margin-bottom: 10px
.add
  height: 100px
  .van-cell__value
    height: 100%
    .addinfo
      margin-left: 100px
      margin-top: 20px
.content
  .van-cell
   .van-cell__title
    span,div
      margin-left: 20px

</style>
